<template>
	<!-- 购买课程 -->
	<view class="content">
		<view class="courseBox">
			<image :src="content.cover" class="cover">
				<text class="name">{{content.name}}</text>
				<text class="price">￥{{content.sell_price}}</text>
				<text class="num">X1</text>
		</view>
		<view class="selectCouponBox" @click="chooseCoupon">
			<text class="label">优惠券</text>
			<view class="rightBox">
				<text class="zanwu">{{couponName}}</text>
				<text class="arrow">></text>
			</view>
		</view>
		<view class="buy" @click="buy()">
			立即购买
		</view>
		<view class="couponOuter" v-if="isCoupon">
			<view class="couponInner">
				<text class="couponTitle">--优惠券--</text>
				<view class="couponList">
					<view class="couponItem" v-for="(item,index) in coupon" :key="index"
						@click="useCoupon(item.coupon_list_id,item.name)">
						<image :src="baseUrl+'couponbg.png'" class="couponbg" />
						<text class="priceIcon">￥</text>
						<text class="couponPrice">{{item.money}}</text>
						<text class="couponCondition">{{item.content}}</text>
						<text class="couponName">{{item.name}}</text>
						<text class="couponTime">有效期:{{item.use_time_desc}}</text>
						<view class="get" v-if="item.is_get==false" @click="getCoupon(item.id)">领券</view>
						<view class="use" v-else>去使用</view>
					</view>
				</view>
				<view class="closeCoupon" @click="isCoupon=!isCoupon">
					关闭
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseURL,
		basePath
	} from '@/config/app'
	export default {
		data() {
			return {
				baseUrl: `https://cdn.zkjialan.com/img/course/`,
				couponName: '暂无可用优惠券',
				isCoupon: false,
				content: '',
				course_id: '',
				coupon: [],
				order_id: 0,
				coupon_list_id: '',
			}
		},
		onLoad() {
			let pagearr = getCurrentPages();
			let currentPage = pagearr[pagearr.length - 1];
			this.course_id = currentPage.options.id;
			//查询详情
			this.$request.get(`course/course/detail?id=${this.course_id}`).then(res => {
				this.content = res.data.data;
			})

			// 下订单
			this.$request.post(`course/order/sumbitOrder`, {
				course_id: this.course_id,
			}).then(res => {
				this.order_id = res.data.data.order_id;
				//请求优惠券
				this.$request.get(`course/coupon/orderCoupon?order_id=${this.order_id}`).then(res => {
					console.log(res.data.data.usable);
					if (res.data.data.usable.length > 0) {
						console.log('有优惠券');
						this.coupon = res.data.data.usable;
						this.couponName = '去选择';
					}
				})
			})
		},
		methods: {
			useCoupon(id, name) {
				this.coupon_list_id = id;
				this.isCoupon = false;
				this.couponName = name;
			},
			chooseCoupon() { //选择优惠券
				if (this.coupon.length > 0) {
					this.isCoupon = true;
				}
			},
			buy() { //调用微信支付
				// 先判断用户是否授权
				console.log("订单id" + this.order_id)
				if (this.order_id > 0) {
					this.$request.post(`course/pay/prepay`, {
						from: 'order',
						pay_way: 1,
						order_id: this.order_id,
						coupon_list_id: this.coupon_list_id
					}).then(res => {
						console.log(res.data.code);
						if (res.data.code == 1) {
							if (res.data.data.pay_way == 3) {
								this.$toast({
									title: '购买成功，即将返回课程页面'
								});
								setTimeout(() => {
									uni.navigateBack({ // 返回上一页
										delta: 1
									});
								}, 1000);
								return;
							}
							wx.requestPayment({
								timeStamp: res.data.data.config.timeStamp.toString(),
								nonceStr: res.data.data.config.nonceStr,
								package: res.data.data.config.package,
								signType: res.data.data.config.signType,
								paySign: res.data.data.config.paySign,
								success: (res) => {
									this.$toast({
										title: '购买成功，即将返回课程页面'
									});
									setTimeout(() => {
										uni.navigateBack({ // 返回上一页
											delta: 1
										});
									}, 1000);
								},
								fail: (res) => {
									this.$toast({
										title: '购买失败'
									});
								}
							});
						} else {
							this.$toast({
								title: res.data.msg
							});
						}
					})
				} else {
					this.$toast({
						title: '未授权登录，请先退出程序，重新授权信息，再进行购买！'
					});
					return;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.buy {
		width: 432rpx;
		height: 82rpx;
		margin-top: 120rpx;
		background-color: #f08229;
		border-radius: 41rpx;
		margin-left: 160rpx;
		font-size: 27rpx;
		font-family: 'am';
		color: #fff;
		text-align: center;
		line-height: 82rpx;
	}

	.couponOuter {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 99999999;
	}

	.couponInner {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 980rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;

		.closeCoupon {
			width: 432rpx;
			height: 82rpx;
			margin-top: 20rpx;
			background-color: #f08229;
			border-radius: 41rpx;
			margin-left: 160rpx;
			font-size: 27rpx;
			font-family: 'am';
			color: #fff;
			text-align: center;
			line-height: 82rpx;
		}

		.couponList {
			width: 670rpx;
			height: 700rpx;
			margin-top: 55rpx;
			margin-left: 40rpx;
			overflow-y: scroll;

			.couponItem {
				position: relative;
				width: 100%;
				height: 194rpx;
				margin-bottom: 25rpx;

				.use,
				.get {
					position: absolute;
					top: 40rpx;
					right: 25rpx;
					width: 116rpx;
					height: 50rpx;
					background-color: #f08229;
					border-radius: 25rpx;
					font-size: 21rpx;
					font-family: 'ar';
					color: #fff;
					text-align: center;
					line-height: 50rpx;
					letter-spacing: 5rpx;
				}

				.couponTime {
					position: absolute;
					top: 120rpx;
					left: 220rpx;
					font-size: 19rpx;
					font-family: 'ar';
					color: #8e8e8e;
				}

				.couponName {
					position: absolute;
					top: 50rpx;
					left: 220rpx;
					font-size: 27rpx;
					font-family: 'am';
				}

				.couponCondition {
					position: absolute;
					width: 194rpx;
					top: 125rpx;
					left: 0;
					font-size: 19rpx;
					font-family: 'ar';
					color: #fff;
					text-align: center;
				}

				.couponPrice {
					position: absolute;
					top: 50rpx;
					left: 35rpx;
					font-size: 40rpx;
					font-family: 'ab';
					color: #fff;
					width: 24%;
				}

				.priceIcon {
					position: absolute;
					top: 65rpx;
					left: 7rpx;
					font-size: 25rpx;
					font-family: 'ab';
					color: #fff;
				}

				.couponbg {
					width: 100%;
					height: 194rpx;
				}
			}
		}

		.couponTitle {
			width: 100%;
			color: #141414;
			font-size: 28rpx;
			font-family: 'ar';
			text-align: center;
			display: block;
			margin-top: 45rpx;
		}
	}

	.selectCouponBox {
		width: 700rpx;
		height: 100rpx;
		background-color: #fff;
		border-radius: 15rpx;
		margin-top: 20rpx;
		margin-left: 25rpx;
		position: relative;
		display: flex;
		justify-content: space-between;

		.rightBox {
			margin-right: 30rpx;
			font-size: 26rpx;
			font-family: 'am';
			line-height: 100rpx;
		}

		.arrow {
			margin-left: 30rpx;
			font-size: 26rpx;
			font-family: 'am';
			line-height: 100rpx;
		}

		.label {
			margin-left: 30rpx;
			font-size: 26rpx;
			font-family: 'am';
			line-height: 100rpx;
		}
	}

	.courseBox {
		width: 700rpx;
		height: 230rpx;
		background-color: #fff;
		border-radius: 15rpx;
		margin-top: 50rpx;
		margin-left: 25rpx;
		position: relative;

		.num {
			position: absolute;
			left: 610rpx;
			top: 160rpx;
			font-size: 26rpx;
			font-family: 'ar';
		}

		.price {
			position: absolute;
			left: 300rpx;
			top: 160rpx;
			font-size: 26rpx;
			font-family: 'ar';
		}

		.name {
			position: absolute;
			left: 300rpx;
			top: 30rpx;
			font-size: 26rpx;
			font-family: 'am';
		}

		.cover {
			    position: absolute;
			    width: 244rpx;
			    height: 160rpx;
			    top: 30rpx;
			    left: 30rpx;
			    border-radius: 15rpx;
		}
	}

	.content {
		position: fixed;
		width: 100%;
		height: 100vh;
		overflow-y: scroll;
		overflow-x: hidden;
		background-color: #f6f6f6;
	}

	page {
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		background-color: #fff !important;
		padding-bottom: 0 !important;
	}
</style>